<template>
  <view class="container">
    <view class="header">
      <view class="header-content">
        <view class="logo-section">
          <text class="logo-text">🍵 茶现武夷</text>
        </view>
        <view class="header-actions">
          <view class="action-btn" @click="goToSearch">
            <text class="icon">🔍</text>
          </view>
          <view class="action-btn" @click="goToCategory">
            <text class="icon">📂</text>
            <text class="action-text">分类</text>
          </view>
          <view class="action-btn cart-btn" @click="goToCart">
            <text class="icon">🛒</text>
            <view v-if="cartCount > 0" class="cart-badge">{{ cartCount }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="banner-section" v-if="bannerData.length">
      <swiper
        class="banner-swiper"
        indicator-dots="true"
        autoplay="true"
        interval="3000"
        duration="500"
        indicator-color="rgba(255,255,255,0.5)"
        indicator-active-color="#ffffff"
      >
        <swiper-item v-for="banner in bannerData" :key="banner.id">
          <view class="banner-item">
            <image class="banner-image" :src="banner.image" mode="aspectFill" />
            <view class="banner-overlay">
              <view class="banner-content">
                <text class="banner-title">{{ banner.title }}</text>
                <text class="banner-subtitle">{{ banner.subtitle }}</text>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="products-section">
      <view class="section-header">
        <text class="section-title">精选好茶</text>
        <view class="more-btn" @click="goToCategory">
          <text class="more-text">查看更多</text>
        </view>
      </view>

      <view class="products-grid">
        <view
          v-for="product in productData"
          :key="product.id"
          class="product-card"
          @click="goToProduct(product.id)"
        >
          <view class="product-image-container">
            <image class="product-image" :src="product.image" mode="aspectFill" />
            <view v-if="product.tag" class="product-tag">{{ product.tag }}</view>
          </view>

          <view class="product-info">
            <text class="product-name">{{ product.name }}</text>
            <view class="product-rating">
            </view>
            <view class="product-price">
              <text class="current-price">¥{{ product.price }}</text>
              <text class="original-price">¥{{ product.originalPrice }}</text>
            </view>
            <view class="add-cart-btn" @click.stop="addToCartHandler(product)">
              <text class="btn-text">加入购物车</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

import { addToCart } from '@/api/cart.js'

const BASE_URL = getApp().$vm.$global.baseURL

export default {
  data() {
    return {
      cartCount: 0,
      bannerData: [],
      productData: [],
    }
  },
  onLoad() {
    this.fetchBanners()
    this.fetchProducts()
    this.loadCartCount()
  },
  methods: {
    loadCartCount() {
      const userInfo = uni.getStorageSync('userInfo')
      const userId = userInfo && userInfo.id
      if (!userId) return
      uni.request({
        url: `${BASE_URL}/api/cart/userid/${userId}`,
        method: 'GET',
        success: (res) => {
          if (res.data.code === '200') {
            this.cartCount = res.data.data.length
          }
        }
      })
    },

    fetchBanners() {
      uni.request({
        url: `${BASE_URL}/api/carousel`,
        method: 'GET',
        success: (res) => {
          if (res.data.code === '200') {
            const list = res.data.data.map(item => ({
              image: BASE_URL + item.img,
              title: item.goodName,
              subtitle: ''
            }))
            this.bannerData = list
          }
        }
      })
    },

    fetchProducts() {
      uni.request({
        url: `${BASE_URL}/api/good`,
        method: 'GET',
        success: (res) => {
          if (res.data.code === '200') {
			console.log("商品goodid",res.data)
            const list = res.data.data.map(item => ({
              id: item.id,
              name: item.name,
              price: item.price,
              originalPrice: item.price + 1,
              image: BASE_URL + item.imgs,
              standard: '默认规格',
              tag: ''
            }))
            this.productData = list
          }
        }
      })
    },

    goToSearch() {
      uni.navigateTo({ url: '/pages/search/search' })
    },
    goToCategory() {
      uni.switchTab({ url: '/pages/category/category' })
    },
    goToCart() {
      uni.switchTab({ url: '/pages/cart/cart' })
    },
    goToProfile() {
      uni.switchTab({ url: '/pages/profile/profile' })
    },
    goToProduct(id) {
      uni.navigateTo({ url: `/pages/product/product?id=${id}` })
	  console.log("传过来的id",id)
    },

    addToCartHandler(product) {
      addToCart(product, () => {
        this.cartCount++
      })
    }
  }
}
</script>




<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 顶部导航 */
.header {
  background-color: #ffffff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-content {
  max-width: 750rpx;
  margin: 0 auto;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #388f4a;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 10rpx;
  position: relative;
}

.icon {
  font-size: 32rpx;
}

.action-text {
  font-size: 24rpx;
  color: #666;
}

.cart-badge, .nav-badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background-color: #ff4757;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 20rpx;
  min-width: 32rpx;
  text-align: center;
}

/* 轮播图 */
.banner-section {
  position: relative;
}

.banner-swiper {
  height: 400rpx;
}

.banner-item {
  position: relative;
  height: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background: linear-gradient(45deg, rgba(56, 143, 74, 0.8), rgba(56, 143, 74, 0.6)); */
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-content {
  text-align: center;
  color: white;
}

.banner-title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.banner-subtitle {
  font-size: 28rpx;
  opacity: 0.9;
}

/* 商品展示 */
.products-section {
  max-width: 750rpx;
  margin: 0 auto;
  padding: 40rpx 30rpx;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.more-text {
  font-size: 24rpx;
  color: #666;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.product-card {
  background-color: white;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.product-card:active {
  transform: scale(0.98);
}

.product-image-container {
  position: relative;
}

.product-image {
  width: 100%;
  height: 280rpx;
}

.product-tag {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  background-color: #ff4757;
  color: white;
  font-size: 20rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

.product-info {
  padding: 24rpx;
}

.product-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
}

.product-rating {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.star {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.rating-text {
  font-size: 20rpx;
  color: #666;
  margin-right: 20rpx;
}

.sales-text {
  font-size: 20rpx;
  color: #999;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.current-price {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff4757;
}

.original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

.add-cart-btn {
  width: 100%;
  height: 72rpx;
  background: linear-gradient(45deg, #388f4a, #4caf50);
  color: white;
  border-radius: 12rpx;
  font-size: 24rpx;
  font-weight: 500;

  display: flex;
  align-items: center;
  justify-content: center;
}


.add-cart-btn:active {
  opacity: 0.8;
}

/* 底部导航 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  border-top: 1rpx solid #e0e0e0;
  padding: 20rpx 0;
  display: flex;
  justify-content: space-around;
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 10rpx;
}

.nav-icon {
  font-size: 32rpx;
  margin-bottom: 8rpx;
}

.nav-text {
  font-size: 20rpx;
  color: #999;
}

.nav-text.active {
  color: #388f4a;
  font-weight: 500;
}
</style>